<template>
	<div id="customerDetailsHome" class="customerDetailsHome">
		<group label-width="4.5em" label-margin-right="2em" label-align="left">
			<cell class="customerDetailsCell" title="电话" value-align="left">
				<span v-if="isWechat == true" v-html="phoneHtml"></span>
				<span v-else @click="callCustomer" style="color: blue;">{{phone}}</span>
				<!--<span><img slot="icon" style="width: 30px" src="@/assets/svg/icon_phone.svg" @click="callCustomer"></span>-->
			</cell>
			<cell class="customerDetailsCell" title="性别" :value="sex" value-align="left"></cell>
			<cell class="customerDetailsCell" title="生日" :value="birthday" value-align="left"></cell>
			<cell class="customerDetailsCell" title="老师" :value="teacher" value-align="left"></cell>
			<cell class="customerDetailsCell" title="咨询" :value="consultant" value-align="left"></cell>
			<cell class="customerDetailsCell" title="推荐人" :value="referrer" value-align="left"></cell>
		</group>
		<group v-if="hasTable == false && doShow == true">
			<h3 style="text-align: center">宝贝还没有成长计划表!</h3>
			<x-button :gradients="['#FF2719', '#FF61AD']" @click.native="createCustomerEx">+点击创建</x-button>
		</group>
		<group v-if="hasTable == true && doShow == true" label-width="4.5em" label-margin-right="2em" label-align="left">
			<x-button :gradients="['#FF2719', '#FF61AD']" @click.native="showCustomerEx">{{customerExBtnText}}</x-button>
			<form-preview v-if="isShowExDetails == true"
			              class="customerExTable"
			              header-label="成长计划表"
			              :body-items="list"
			              :footer-buttons="raiseUpBtn"
			              label-algin = "justify"
			              name="raiseUp"></form-preview>
		</group>

		<div v-transfer-dom>
			<popup v-model="showPopup" height="270px" is-transparent>
				<div style="width: 95%;background-color:#fff;margin:0 auto;padding-bottom: 5px">
					<flexbox>
						<flexbox-item>
							<x-button class="flexBtn_confirm" @click.native="connected">打通了</x-button>
						</flexbox-item>
						<flexbox-item>
							<x-button class="flexBtn_cancel" @click.native="unconnected">没打通</x-button>
						</flexbox-item>
					</flexbox>
				</div>
			</popup>
		</div>

		<div v-transfer-dom>
			<popup v-model="showIfConnected" height="270px" is-transparent>
				<div style="width: 95%;background-color:#fff;margin:0 auto;padding-bottom: 5px">
					<group>
						<x-textarea :max="200" :placeholder="hint"  v-model="detail" :height="50" ></x-textarea>
					</group>
					<flexbox>
						<flexbox-item>
							<x-button class="flexBtn_confirm" @click.native="confirm">提交</x-button>
						</flexbox-item>
						<flexbox-item>
							<x-button class="flexBtn_cancel" @click.native="cancel">取消</x-button>
						</flexbox-item>
					</flexbox>
				</div>
			</popup>
		</div>

	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import dateutils from '@/utils/date'
	import NetWorking from '../../../../utils/networking'
	import { Group, Cell, XButton, FormPreview, TransferDom, Popup, XTextarea, Flexbox, FlexboxItem, Confirm} from 'vux'
	export default {
		name: "customer-details-home",
		components: {
			Cell,
			Group,
			XButton,
			FormPreview,
			TransferDom,
			Popup,
			XTextarea,
			Flexbox,
			FlexboxItem,
			Confirm
		},
		directives: {
			TransferDom
		},
		data () {
			return {
				id: this.$route.params.id,
				isWechat: false,
				showIfConnected: false,
				detail: '',
				hint: '通话记录',
				showPopup: false,
				showConfirm: false,
				confirmTitle: '电话接通了吗？',
				name: '',
				sex: '',
				phone: '',
				phoneHtml: '',
				birthday: '',
				teacher: '',
				consultant: '',
				referrer: '',
				doShow: false,
				hasTable: false,
				isShowExDetails: false,
				customerExBtnText: '查看学员成长计划',
				customerPlanDetails: '',
				list: [{
					label: '需求',
					value: '',
				}, {
					label: '兴趣',
					value: ''
				}, {
					label: '性格',
					value: ''
				}, {
					label: '教育决策',
					value: ''
				}, {
					label: '家庭住址',
					value: ''
				}, {
					label: '喜欢颜色',
					value: ''
				}, {
					label: '是否剖腹产',
					value: ''
				}, {
					label: '语言发育',
					value: ''
				}, {
					label: '吐字清晰',
					value: ''
				}, {
					label: '认生程度',
					value: ''
				}, {
					label: '手部精细',
					value: ''
				}, {
					label: '隔代代养',
					value: ''
				}, {
					label: '哭闹表达需求',
					value: ''
				}, {
					label: '哭多久妥协',
					value: ''
				}, {
					label: '玩具多少种',
					value: ''
				}, {
					label: '是否母乳',
					value: ''
				}, {
					label: '是否游泳',
					value: ''
				}, {
					label: '接触电子产品',
					value: ''
				}, {
					label: '接触哪些',
					value: ''
				}, {
					label: '接触频次',
					value: ''
				}, {
					label: '是否绘本阅读',
					value: ''
				}, {
					label: '阅读频次',
					value: ''
				}, {
					label: '反应能力',
					value: ''
				}, {
					label: '自信心',
					value: ''
				}, {
					label: '抗挫能力',
					value: ''
				}],
				raiseUpBtn: [{
					style: 'primary',
					text: '编辑',
					onButtonClick: () => {
						this.$router.push({ name: "updateCustomerExDetails", params: { id: this.id }})
					}
				}]
			}
		},
		mounted: function () {
			if(navigator.userAgent.match('MicroMessenger')){
				this.isWechat = true
			}

			let _this = this
			let url = 'ylyn/getCustomerDetailsById'

			NetWorking.doGet(
				url,
				null,
				{
					params: {
						customer_id: this.$route.params.id
					}
				}
			).then(
				response => {
					let rs = response.data;
					if(rs.error_code == 0){
						_this.hasTable = true
						_this.customerPlanDetails = rs.ylyn_details
					}else if(rs.error_code == 22101){
						_this.hasTable = false
					}else{
						alert(rs.error_message)
					}
					_this.doShow = true
				}
			)
		},
		created: function () {
			let _this = this

			var url = 'user_customer/getUserByCustomerIdWithRole'
			var customerUrl = 'customers/' + this.id
			var urlarr = new Array()
			urlarr.push(
				NetWorking.doGet(
					url,
					null,
					{params: {id: this.id, role_name: 'teacher'}}
				))

			urlarr.push(
				NetWorking.doGet(
					url,
					null,
					{params: {id: this.id, role_name: 'consultant'}}
				))

			urlarr.push(
				NetWorking.doGet(
					customerUrl,
					null,
					null
				))

			var callback = function (c1, c2, c3) {
				let teacherList = c1.data.user_list
				let consultantList = c2.data.user_list
				let customer = c3.data.customer
				for(var i=0; i<teacherList.length; i++){
					_this.teacher += teacherList[i].nickname + ','
				}
				for(var i=0; i<consultantList.length; i++){
					_this.consultant += consultantList[i].nickname + ','
				}
				_this.teacher = _this.teacher.substring(0, _this.teacher.length-1)
				_this.consultant = _this.consultant.substring(0, _this.consultant.length-1)
				if(customer.sex == 1){
					_this.sex = '男'
				}else{
					_this.sex = '女'
				}
				_this.name = customer.name
				_this.phone = customer.phone
				_this.birthday = customer.birthday
				_this.referrer = customer.referrer_obsolete

			}

			NetWorking.doAll2(urlarr).then(this.axios.spread(callback))
				.catch(function (e){
					console.log(2);
				});
		},
		watch: {
			phone: function () {
				this.phoneHtml = '<a style="text-decoration: none" href="tel:' + this.phone + '">' + this.phone + '</a>'
			},
			customerPlanDetails: function () {
				this.list[0].value = this.customerPlanDetails.request
				this.list[1].value = this.customerPlanDetails.interests
				this.list[2].value = this.customerPlanDetails.kid_character
				this.list[3].value = this.customerPlanDetails.decision_made
				this.list[4].value = this.customerPlanDetails.address
				this.list[5].value = this.customerPlanDetails.favorite_color
				this.list[6].value = this.changeToYesNo(this.customerPlanDetails.is_cesarean)
				this.list[7].value = this.customerPlanDetails.language
				this.list[8].value = this.changeToYesNo(this.customerPlanDetails.is_clear_speak)
				this.list[9].value = this.changeToYesNo(this.customerPlanDetails.is_shy)
				this.list[10].value = this.customerPlanDetails.hand_details
				this.list[11].value = this.changeToYesNo(this.customerPlanDetails.is_grand_raise)
				this.list[12].value = this.changeToYesNo(this.customerPlanDetails.is_cry_for_request)
				this.list[13].value = this.customerPlanDetails.compromise
				this.list[14].value = this.customerPlanDetails.dolls_number
				this.list[15].value = this.changeToYesNo(this.customerPlanDetails.is_breast_fed)
				this.list[16].value = this.changeToYesNo(this.customerPlanDetails.is_swimming)
				this.list[17].value = this.changeToYesNo(this.customerPlanDetails.is_touch_edevice)
				this.list[18].value = this.customerPlanDetails.edevice_type
				this.list[19].value = this.customerPlanDetails.edevice_frequency
				this.list[20].value = this.changeToYesNo(this.customerPlanDetails.is_reading_book)
				this.list[21].value = this.customerPlanDetails.reading_frequency
				this.list[22].value = this.customerPlanDetails.reaction_ability
				this.list[23].value = this.customerPlanDetails.confidence
				this.list[24].value = this.customerPlanDetails.setback_resist
			}
		},
		methods: {
			onCancel () {
				console.log('on cancel')
			},
			onConfirm (msg) {
				this.logoutNow()
			},
			onHide () {
				console.log('on hide')
			},
			onShow () {
				console.log('on show')
			},
			callCustomer: function () {
				if(this.isWechat){
					this.showPopup = true
				}else{
					let _this = this
					window.plugins.CallNumber.callNumber(function onSuccess(result){
							setTimeout(function(){
								_this.showPopup = true
							}, 1000)
						},
						function onError(result) {
							alert("Error:call number"+result)
						},
						_this.phone,true)
				}
			},
			connected: function () {
				this.showPopup = false
				this.showIfConnected = true
			},
			unconnected: function () {
				this.showPopup = false
				//TODO
			},
			confirm: function () {
				this.showIfConnected = false

				let _this = this
				NetWorking.doPost(
					'customertrace',
					null,
					null,
					{
						params: {
							content: this.detail ,
							customerId: this.id
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.newActivity()
						}else{
							alert(rs.error_message)
						}
					}
				)
			},
			newActivity: function () {
				let _this = this
				let curTime = dateutils.getYYMMDDHHmm(new Date())
				NetWorking.doPost(
					'activities/attachCallActivity',
					null,
					{
						title: '电话',
						content: this.detail,
						time: curTime,
						status: 2 //mark call status as 2 if we confirm we've called the customer
					},
					{
						headers: {
							'Content-Type': 'application/json;charset=utf-8',
							'data': 'JSON.stringify(json)'
						},
						params: {
							"employee_id": this.$store.state.user.userModel.sysUser.id,
							"customer_id": this.id,
							"rolePlay": 'consultant'
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.detail = ''
							_this.show   = false
							bus.$emit("setIndex", 1)
						}else{
							alert(rs.error_message);
						}
					}
				)
			},
			cancel: function () {
				this.showIfConnected = false
			},
			createCustomerEx: function () {
				this.$router.push({ name: "newCustomerExDetails", params: { id: this.id }})
			},
			showCustomerEx: function () {
				this.isShowExDetails = !(this.isShowExDetails);
				if(this.isShowExDetails == true){
					this.customerExBtnText = '关闭学员成长计划'
				}else{
					this.customerExBtnText = '查看学员成长计划'
				}
			},
			changeToYesNo(value){
				if(value){
					return '是'
				}else{
					return '否'
				}
			}
		}
	}
</script>

<style>
	.customerDetailsCell{
		padding: 0px 15px !important;
	}

	.customerDetailsHome{
		margin-bottom: 100px;
	}
</style>
